<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <script src="./js/jquery.js"></script>
</head>

<body>
    <div id="app">
        <p>msg:{{ msg }}</p>
        <input type="text" v-model="msg">
        <hr>
        <input type="text" v-model="wd">
        <input type="button" value="查询数据" @click="loadDatas()">
        <ul>
            <li v-for="(item, index) in list" :key="index">{{item}}</li>
        </ul>
        <!-- 监视器默认只完成栈中值得监控 ,所以监控的是user的地址，user.name虽然变了，但是监控的栈中的地址不变-->
        <p>user:{{user}}</p>
        <input type="text" v-model="user.name">
        <hr>
        <p>info:{{info}}</p>
        <input type="text" v-model="info">
    </div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            msg: "msg变量",
            wd: "html",
            list: [],
            user: {
                name: "tom",
                age: 23
            },
            info:"info变量"
        },
        watch: {
            msg: function (newValue, oldValue) {
                console.log("被观察的msg变量发生的：", newValue, oldValue);
                // this.msg=Math.random();
            },
            // wd: function () {
            //     this.loadDatas();
            // },
            
            // user:function(){
            //     console.log("user被修改");
            // }
            user: {
                handler: function (newValue, oldValue) {
                    console.log("user被修改", newValue, oldValue);
                },
                deep: true,
                immediate: false
            },
            "user.name":function(newValue, oldValue){
                console.log("user.name发生了变化",newValue, oldValue);
                
            },
            info:[
                function(){
                    console.log("info发生变化-fun1")
                },
                function(){
                    console.log("info发生变化-fun2")
                },
            ]

        },
        methods: {
            loadDatas() {
                $.ajax({
                    url: "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
                    method: "get",
                    data: {
                        wd: this.wd
                    },
                    dataType: "jsonp",
                    jsonp: "cb",
                    success: (data) => {
                        // console.log(data);
                        this.list = data.s;
                    }
                });
            }
        },
    });

    vm.$watch("wd", function () {
        $.ajax({
            url: "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
            method: "get",
            data: {
                wd: vm.wd
            },
            dataType: "jsonp",
            jsonp: "cb",
            success: (data) => {
                // console.log(data);
                vm.list = data.s;
            }
        });
    },{
        deep:false,
        immediate:true
    });
    // vm.$watch("user.name",function(){
    //     console.log(111);
    // })
</script>

</html>